<script setup>
import { reactive, ref, toRefs, getCurrentInstance, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useMapState } from "@/hooks/mapper-store";
import { useToggleSheetItem } from "@/hooks/header-hook";
import { useStore } from "vuex";

const store = useStore();
const user = store.state.user;
let token = computed(() => user.token);
let userInfo = computed(() => user.userInfo);
let show = computed(store.state.show);

const D = reactive({
  sheet_show: false,
  line_text: "online",
  bgColor: "transparent",
  route: useRoute(),
  router: useRouter(),
  // ...toRefs(useMapState("show")),
  // ...toRefs(useMapState("user", ["token", "userInfo"])),
});

const actions = [
  { name: "创建群聊", index: 1 },
  { name: "添加好友/群", index: 2 },
  { name: "一起画画", index: 3 },
  { name: "切换在线状态", index: 4},
];
const app = getCurrentInstance().appContext.app;
const line_status = ref("var(--line-color)");

/**
 * 面板切换处理
 */
const on_select = useToggleSheetItem(line_status, D , user.userInfo._id);
/**
 * 切换侧边导航
 */
const show_left_popup = () => {
  store.dispatch("setShow", true);
};

// 这里可以用 props 实现 就是给你们多用一些其他的方式进行传递
app.$bus.on("changeNavBarTopBgColor", (color) => {
  D.bgColor = color;
});
</script>

<template>
  <div
    class="header"
    :style="{
      width: '100vw',
      position: D.route.path === '/friend_dynamic' ? 'absolute' : 'relative',
    }"
  >
    <van-nav-bar
      class="vanNavBar" 
      :border="D.route.path !== '/friend_dynamic'"
      :style="{
        transition: 'background 1s',
        background: D.route.path === '/friend_dynamic' ? D.bgColor : '#08f',
      }"
      :title="D.route.meta.title ? D.route.meta.title : D.route.query.title"
    >
      <template #left>
        <div
          class="app-navbar"
          v-show="
            D.route.name === 'message' ||
            D.route.name === 'contacts' ||
            (D.route.name === 'dynamic' &&
              token.length > 0 &&
              JSON.stringify(userInfo) !== '{}')
          "
          @click="show_left_popup"
        >
          <div class="avatar">
            <img :src="userInfo.avatar" alt="" />
          </div>
          <div class="nickName">
            <p style="color: white">{{ userInfo.nick_name }}</p>
            <p>
              <span class="line"></span>
              <small class="line-text" style="color: white">{{
                D.line_text
              }}</small>
            </p>
          </div>
        </div>
        <van-nav-bar
          v-show="
            D.route.name !== 'message' &&
            D.route.name !== 'contacts' &&
            D.route.name !== 'dynamic' &&
            token.length > 0 &&
            JSON.stringify(userInfo) !== '{}'
          "
          left-arrow
          @click-left="D.router.back()"
        />
      </template>
      <template #right>
        <van-icon
          v-show="token.length > 0 && JSON.stringify(userInfo) !== '{}'"
          name="plus"
          @click="D.sheet_show = true"
        />
      </template>
    </van-nav-bar>
    <van-action-sheet
      cancel-text="取消"
      :round="false"
      v-model:show="D.sheet_show"
      :actions="actions"
      @select="on_select"
    />
  </div>
</template>

<style lang="scss">
.header {
  --van-padding-md: 8px;
  --van-nav-bar-icon-color: white;
  --van-nav-bar-title-text-color: white;
}

.app-navbar {
  width: 200px;
  height: 100%;
  display: flex;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  .avatar {
    width: 40px;
    display: flex;
    align-items: center;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
    }
  }
  .nickName {
    display: flex;
    justify-content: center;
    flex-direction: column;
    margin-left: 7px;

    p {
      height: 15px;
      font-size: 15px;
      margin: 0;
    }
    p:last-child {
      text-align: left;
      position: relative;
      small {
        display: inline-block;
        font-size: 12px;
        padding-left: 10px;
        position: relative;
      }
      margin-bottom: 4px;
      .line {
        position: absolute;
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background-color: v-bind(line_status);
        display: block;
        left: 0;
        top: 8px;
      }
    }
  }
}
</style>
